<template>
  <div class="a">
    <div class="b">
      <el-menu
        default-active="mainPage"
        class="navigation"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
        router
        unique-opened="true"
        text-color="#635656"
        active-text-color="#09fbfb"
        background-color="#f4f7f6"
      >
        <div class="f">
          <img
            alt="Vue logo"
            src="../../assets/logo.png"
            style="height: 30%; width: 30%"
          />
          <span>教师端</span>
        </div>
        <el-menu-item index="/teacher/mainPage">
          <el-icon><icon-menu /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/teacher/publishhw">
          <el-icon><icon-menu /></el-icon>
          <span>布置作业</span>
        </el-menu-item>
        <el-sub-menu index="/teacher/homework">
          <template #title>
            <el-icon><location /></el-icon>
            <span>作业情况</span>
          </template>
          <el-menu-item index="/teacher/hwoverlook">
            <el-icon><icon-menu /></el-icon>
            <span>作业总览</span>
          </el-menu-item>
          <el-menu-item index="/teacher/hwcorrecting">
            <el-icon><icon-menu /></el-icon>
            <span>批改作业</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/teacher/classmanagement">
          <el-icon><icon-menu /></el-icon>
          <span>班级管理</span>
        </el-menu-item>
        <el-menu-item index="/teacher/chat">
          <el-icon><icon-menu /></el-icon>
          <span>聊天室</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="c">
      <div class="d">
        <el-button class="btn" @click="personalInfoBox">个人信息</el-button>
        <el-button class="btn" @click="changePasswordBox">修改密码</el-button>
        <el-button class="btn" @click="exit">退出登录</el-button>
      </div>
      <div class="e">
        <!-- --------------------------------------个人信息对话框---------------------------------------------------------------- -->
        <el-dialog
          v-model="this.isPersonalInfoVisible"
          title="个人信息"
          width="30%"
        >
          <el-form :model="this.user" label-width="120px">
            <el-form-item label="头像: " prop="headPortrait">
              <el-input type="text" v-model="user.headPortrait" />
            </el-form-item>
            <el-form-item label="姓名:" prop="username">
              <el-input type="text" v-model="user.username" />
            </el-form-item>
            <el-form-item label="性别: " prop="sex">
              <el-input type="text" v-model="user.sex" />
            </el-form-item>
            <!-- <el-form-item label="年龄: " prop="password">
                            <el-input type="text" v-model="user.age" />
                        </el-form-item> -->
            <el-form-item label="手机号: " prop="phoneNumber">
              <el-input type="text" v-model="user.phoneNumber" />
            </el-form-item>
            <el-form-item label="身份: " prop="role">
              <el-input type="text" v-model="user.role" disabled />
            </el-form-item>
            <el-form-item label="身份描述: " prop="roleDescription">
              <el-input type="text" v-model="user.roleDescription" disabled />
            </el-form-item>
          </el-form>
          <template #footer>
            <span>
              <el-button @click="isPersonalInfoVisible = false">取消</el-button>
              <el-button type="primary" @click="updateInfo">修改信息</el-button>
            </span>
          </template>
        </el-dialog>
        <!-- -------------------------------------修改密码对话框---------------------------------------------------------------- -->
        <el-dialog
          v-model="this.isChangePasswordVisible"
          title="修改密码对话框"
          width="30%"
        >
          <el-form :model="this.password" label-width="120px">
            <el-form-item :label="table.oldPassword" prop="oldPassword">
              <el-input type="text" v-model="password.oldPassword" />
            </el-form-item>
            <el-form-item :label="table.newPassword" prop="newPassword">
              <el-input type="text" v-model="password.newPassword" />
            </el-form-item>
            <el-form-item :label="table.comfirmPassword" prop="comfirmPassword">
              <el-input type="text" v-model="password.comfirmPassword" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span>
              <el-button @click="isChangePasswordVisible = false"
                >取消</el-button
              >
              <el-button type="primary" @click="changePassword"
                >确认修改密码</el-button
              >
            </span>
          </template>
        </el-dialog>
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
// import { ref } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";

// const isCollapse = ref(false)
export default {
  setup() {
    // isCollapse = ref(false)
  },
  data() {
    return {
      table: {
        oldPassword: "旧密码",
        newPassword: "新密码",
        comfirmPassword: "确认密码",
      },
      // 密码
      password: {
        oldPassword: "",
        newPassword: "",
        comfirmPassword: "",
      },
      // 用户信息
      user: {},
      // 是否显示个人信息
      isPersonalInfoVisible: false,
      // 是否显示修改密码
      isChangePasswordVisible: false,
    };
  },
  methods: {
    getPersonalInfo() {
      this.$axios
        .get("user/info")
        .then((response) => {
          this.user = response.data;
          console.log(this.user);
        })
        .catch(function (error) {
          console.log("发送请求失败：" + error);
        })
        .then(function () {
          console.log("测试成功");
        });
    },
    personalInfoBox() {
      this.isPersonalInfoVisible = true;
    },
    updateInfo() {
      var _this = this;
      ElMessageBox.confirm("你确定修改个人信息吗？", "警告", {
        confirmButtonText: "Yes",
        cancelButtonText: "Cancel",
        type: "warning",
      })
        .then(() => {
          let formData = new FormData();
          formData.append("userId", this.user.userId);
          formData.append("username", this.user.username);
          formData.append("sex", this.user.sex);
          formData.append("headPortrait", this.user.headPortrait);
          formData.append("phoneNumber", this.user.phoneNumber);
          formData.append("role", this.user.role);
          formData.append("roleDescription", this.user.roleDescription);
          this.$axios
            .post("/user/update", formData)
            .then((response) => {
              let stateCode = response.headers["state"];
              if (stateCode == "200") {
                this.$message.success("修改个人信息成功！");
                this.isPersonalInfoVisible = false;
              } else if (stateCode == "") {
                this.$message.success("修改个人信息异常！");
              } else {
                this.$message.error(
                  this.$enum.getDescByValue("STATE", stateCode)
                );
              }
            })
            .catch(function (error) {
              let stateCode = error.response.headers["state"];
              if (stateCode != "") {
                _this.$message.error(
                  _this.$enum.getDescByValue("STATE", stateCode)
                );
              } else {
                _this.$message.error("后端异常");
              }
            })
            .then(function () {
              console.log("测试成功");
            });
        })
        .catch(() => {
          ElMessage({
            type: "error",
            message: "已取消修改个人信息",
          });
        });
    },
    changePasswordBox() {
      this.isChangePasswordVisible = true;
    },
    changePassword() {
      var _this = this;
      ElMessageBox.confirm("你确定修改密码吗？", "警告", {
        confirmButtonText: "Yes",
        cancelButtonText: "Cancel",
        type: "warning",
      })
        .then(() => {
          let formData = new FormData();
          formData.append("phoneNumber", this.user.phoneNumber);
          formData.append("oldPassword", this.password.oldPassword);
          formData.append("newPassword", this.password.newPassword);
          this.$axios
            .post("/user/updatepassword", formData)
            .then((response) => {
              let stateCode = response.headers["state"];
              if (stateCode == "200") {
                this.$message.success("修改密码成功！");
                this.isChangePasswordVisible = false;
              } else if (stateCode == "") {
                this.$message.success("修改密码异常！");
              } else {
                this.$message.error(
                  this.$enum.getDescByValue("STATE", stateCode)
                );
              }
            })
            .catch(function (error) {
              let stateCode = error.response.headers["state"];
              if (stateCode != "") {
                _this.$message.error(
                  _this.$enum.getDescByValue("STATE", stateCode)
                );
              } else {
                _this.$message.error("后端异常");
              }
            })
            .then(function () {
              console.log("测试成功");
            });
        })
        .catch(() => {
          ElMessage({
            type: "error",
            message: "已取消修改密码",
          });
        });
    },
    exit() {
      this.$message.success("退出成功!");
      this.$router.push("/login");
    },
    handleOpen() {
      //  console.log("open")
    },
    handleClose() {
      // console.log("close")
    },
  },
  mounted() {
    this.getPersonalInfo();
  },
};
</script>

<style scoped>
.a {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.b {
  height: 100%;
  width: 15%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.c {
  height: 100%;
  width: 85%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.d {
  height: 10%;
  width: 100%;
  background-image: url("../../assets/login2.jpg");
  background-size: cover;
  /* 弹性盒子 */
  display: flex;
  /* 列的排列顺序 */
  justify-content: flex-end;
  /* 文字在纵轴上的位置 */
  align-content: center;
  /* 子元素在纵轴上的位置 */
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
}

.e {
  height: 90%;
  width: 100%;
  background-color: bisque;
  box-sizing: border-box;
}

.f {
  height: 20%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigatorSpan {
  color: antiquewhite;
}

.navigation:not(.el-menu--collapse) {
  height: 100%;
  width: 100%;
}

.btn {
  /* em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
    vh就是当前屏幕可见高度的1%
    vw就是当前屏幕宽度的1% */
  height: 3em;
  width: 6em;
  font-size: 1em;
}
</style>
